<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>乐优商城--秒杀页面</title>
    <link rel="icon" href="/assets/img/favicon.ico">


    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/widget-jquery.autocomplete.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-seckill-index.css"/>
</head>


<body>

<!-- 头部栏位 -->
<!--页面顶部，由js动态加载-->
<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
<div id="nav-bottom"></div>
<script type="text/javascript">$("#nav-bottom").load("top.html");</script>

<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#service").hover(function () {
            $(".service").show();
        }, function () {
            $(".service").hide();
        });
        $("#shopcar").hover(function () {
            $("#shopcarlist").show();
        }, function () {
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/jquery.autocomplete.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
<script type="text/javascript" src="js/pages/seckill-index.js"></script>
<script>
    $(function () {
        $("#code").hover(function () {
            $(".erweima").show();
        }, function () {
            $(".erweima").hide();
        });
    })
</script>
</body>
<div id="seckillIndexApp">
    <div class="py-container index">
        <!--banner-->
        <div class="banner">
            <img src="img/_/banner.png" class="img-responsive" alt="">
        </div>

        <!--商品列表-->
        <div class="goods-list">
            <ul class="seckill" id="seckill">
                <li class="seckill-item" v-for="item in itemsList">
                    <div class="pic">
                        <img :src="item.image" alt=''>
                    </div>
                    <div class="intro"><span>{{item.title}}</span></div>
                    <div class='price'><b class='sec-price'>￥{{ly.formatPrice(item.skillPrice)}}</b><b
                            class='ever-price'>￥{{ly.formatPrice(item.sku.price)}}</b></div>
                    <div class='num'>
                        <div>已售{{(item.seckillTotal / item.skillStock).toFixed(2) * 100}}%</div>
                        <div class='progress'>
                            <div class='sui-progress progress-danger'>
                                <span :style="'width: '+(((item.skillStock-item.seckillTotal) / item.skillStock).toFixed(2) *100)+'%;'"
                                      class='bar'></span></div>
                        </div>
                        <div>剩余<b class='owned'>{{item.skillStock - item.seckillTotal}}</b>件</div>
                    </div>
                    <a class='sui-btn btn-block btn-buy' @click="openItem(item.id)" target='_blank'>立即抢购</a>
                </li>

            </ul>
        </div>
        <div class="cd-top">
            <div class="top">
                <img src="img/_/gotop.png"/>
                <b>TOP</b>
            </div>
            <div class="code" id="code">
                <span><img src="img/_/code.png"/></span>
            </div>
            <div class="erweima">
                <img src="img/_/erweima.jpg" alt="">
                <s></s>
            </div>
        </div>
    </div>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/common.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#seckillIndexApp",
        data: {
            //定义需要向后台传的参数
            ly,
            searchParams: {
                page: 1
            },
            //商品数据列表
            itemsList: [],
            //总记录数
            totalCount: 0,
            //总页数
            totalPages: 0

        },
        created() {
            this.findSeckillSku();
        },
        computed: {
            progress() {
                return
            }
        },
        methods: {
            findSeckillSku() {
                ly.http.post("/item/seckill/skus/page", this.searchParams)
                    .then((resp) => {
                        //对商品数据列表中的skus做处理
                        this.itemsList = resp.data.items
                        this.totalCount = resp.data.total
                        this.totalPages = resp.data.totalPage
                    })
            },
            openItem(id) {
                let item = this.itemsList.find(item => item.id == id);
                let stock = item.skillStock - item.seckillTotal;
                if (stock<=0){
                    alert("商品已秒杀完");


                }else {
                    window.location = 'seckill-item.html?id=' + id;
                }
            }
        }
    });
</script>

<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->
<script type="text/javascript" src="js/model/cartModel.js"></script>
<script type="text/javascript" src="js/czFunction.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/widget/cartPanelView.js"></script>
</html>